﻿<!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
-->

<phone:PhoneApplicationPage 
    x:Class="PhoneToolkitSample.Samples.HubTileSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <controls:Pivot Title="HUBTILE SAMPLE" SelectionChanged="Pivot_SelectionChanged">

            <!-- All images by Jeff Wilcox, used with permission -->
            <controls:PivotItem Header="food">
                <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Hidden">
                    <Grid Width="370" HorizontalAlignment="Left" Margin="0,0,0,12">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0"
                                   Grid.ColumnSpan="2"
                                   TextWrapping="Wrap"
                                   Margin="12,0,0,12">
                            The HubTile control represents an animated tile that supports an image and a title.
                            On the back, it can display either a message or a notification.
                        </TextBlock>
                        <toolkit:HubTile Grid.Row="1" Grid.Column="0" 
                                         Margin="12,12,0,0"
                                         Source="/Images/Dessert.jpg"
                                         Title="Dessert"
                                         Notification="2 New&#x0d;&#x0a;Receipes"
                                         DisplayNotification="True"
                                         GroupTag="Food"/>
                        <toolkit:HubTile Grid.Row="1" Grid.Column="1" 
                                         Margin="12,12,0,0"
                                         Source="/Images/Fruits.jpg"
                                         Title="Fruits"
                                         GroupTag="Food"/>
                        <toolkit:HubTile Grid.Row="2" Grid.Column="0" 
                                         Margin="12,12,0,0"
                                         Source="/Images/Pretzel.jpg"
                                         Title="Pretzel"
                                         Notification="w/fixings"
                                         DisplayNotification="True"
                                         GroupTag="Food"/>
                        <toolkit:HubTile Grid.Row="2" Grid.Column="1" 
                                         Margin="12,12,0,0"
                                         Source="/Images/Shrimp.jpg"
                                         Title="Shrimp"
                                         Message="&quot;Just an amazing work by the chef&quot;"
                                         GroupTag="Food"/>
                        <toolkit:HubTile Grid.Row="3" Grid.Column="0" 
                                         Margin="12,12,0,0"
                                         Source="/Images/SteakSandwich.jpg"
                                         Title="Steak&#x0d;&#x0a;Sandwich"
                                         Message="@ a great cafe"
                                         GroupTag="Food"/>
                        <toolkit:HubTile Grid.Row="3" Grid.Column="1" 
                                         Margin="12,12,0,0"
                                         Source="/Images/Beignets.jpg"
                                         Title="Beignets"
                                         Notification="New&#x0d;&#x0a;Orleans"
                                         DisplayNotification="True"
                                         GroupTag="Food"/>
                    </Grid>
                </ScrollViewer>
            </controls:PivotItem>

            <controls:PivotItem Header="places">
                <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Hidden">   
                    <Grid Width="370" HorizontalAlignment="Left" Margin="0,0,0,12">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0"
                                       Grid.ColumnSpan="2"
                                       TextWrapping="Wrap"
                                       Margin="12,0,0,12">
                                Animations can be stopped on command either individually or by GroupTag.
                                Freezing a HubTile that is out of the screen is good practice.
                        </TextBlock>
                        <toolkit:HubTile Grid.Row="1" Grid.Column="0"
                                         Margin="12,12,0,0"
                                         Source="/Images/Mürren.jpg"
                                         Title="Switzerland"
                                         IsFrozen="True"
                                         GroupTag="Places"/>
                        <toolkit:HubTile Grid.Row="1" Grid.Column="1"
                                         Margin="12,12,0,0" 
                                         Source="/Images/Seattle.jpg"
                                         Title="USA"
                                         IsFrozen="True"
                                         GroupTag="Places"/>
                        <toolkit:HubTile Grid.Row="2" Grid.Column="0"
                                         Margin="12,12,0,0"
                                         Source="/Images/Neuschwanstein.jpg"
                                         Title="Germany"
                                         IsFrozen="True"
                                         GroupTag="Places"/>
                        <toolkit:HubTile Grid.Row="2" Grid.Column="1"
                                         Margin="12,12,0,0"
                                         Source="/Images/Paris.jpg"
                                         Title="France"
                                         IsFrozen="True"
                                         GroupTag="Places"/>
                        <toolkit:HubTile Grid.Row="3" Grid.Column="0"
                                         Margin="12,12,0,0" 
                                         Source="/Images/Copenhagen.jpg"
                                         Title="Denmark"
                                         IsFrozen="True"
                                         GroupTag="Places"/>
                        <toolkit:HubTile Grid.Row="3" Grid.Column="1"
                                         Margin="12,12,0,0"
                                         Source="/Images/Venice.jpg"
                                         Title="Italy"
                                         IsFrozen="True"
                                         GroupTag="Places"/>
                    </Grid>
                </ScrollViewer>
            </controls:PivotItem>

            <controls:PivotItem Header="sizes">
                <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Hidden">
                    <Grid Width="432" HorizontalAlignment="Left" Margin="0,0,0,12">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0"
                                   Grid.ColumnSpan="4"
                                   TextWrapping="Wrap"
                                   Margin="12,0,0,12">
                            The HubTile control can be sized to be small, medium, or large,
                            in addition to the default size.
                        </TextBlock>
                        <toolkit:HubTile Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"
                                         Margin="12,12,0,0"
                                         Source="/Images/Dessert.jpg"
                                         Title="Dessert"
                                         Notification="2 New&#x0d;&#x0a;Receipes"
                                         DisplayNotification="True"
                                         GroupTag="Sizes"
                                         Size="Large"/>
                        <toolkit:HubTile Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
                                         Margin="12,12,0,0"
                                         Source="/Images/Fruits.jpg"
                                         Title="Fruits"
                                         GroupTag="Sizes"
                                         Size="Medium"/>
                        <toolkit:HubTile Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
                                         Margin="12,12,0,0"
                                         Source="/Images/Pretzel.jpg"
                                         Title="Pretzel"
                                         Notification="w/fixings"
                                         DisplayNotification="True"
                                         GroupTag="Sizes"
                                         Size="Medium"/>
                        <toolkit:HubTile Grid.Row="3" Grid.Column="0" 
                                         Margin="12,12,0,0"
                                         Source="/Images/Shrimp.jpg"
                                         Title="Shrimp"
                                         Message="&quot;Just an amazing work by the chef&quot;"
                                         GroupTag="Sizes"
                                         Size="Small"/>
                        <toolkit:HubTile Grid.Row="3" Grid.Column="1" 
                                         Margin="12,12,0,0"
                                         Source="/Images/SteakSandwich.jpg"
                                         Title="Steak&#x0d;&#x0a;Sandwich"
                                         Message="@ a great cafe"
                                         GroupTag="Sizes"
                                         Size="Small"/>
                        <toolkit:HubTile Grid.Row="3" Grid.Column="2" 
                                         Margin="12,12,0,0"
                                         Source="/Images/Beignets.jpg"
                                         Title="Beignets"
                                         Notification="New&#x0d;&#x0a;Orleans"
                                         DisplayNotification="True"
                                         GroupTag="Sizes"
                                         Size="Small"/>
                        <toolkit:HubTile Grid.Row="3" Grid.Column="3" 
                                         Margin="12,12,0,0"
                                         Source="/Images/Dessert.jpg"
                                         Title="Beignets"
                                         Notification="New&#x0d;&#x0a;Orleans"
                                         DisplayNotification="True"
                                         GroupTag="Sizes"
                                         Size="Small"/>
                    </Grid>
                </ScrollViewer>
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>
    
</phone:PhoneApplicationPage>